<template>
  <div class="container-table">
    <!-- 搜索框 -->
    <Search></Search>
    <br />
    <el-card>
      <!-- 操作区域 -->
      <Action :option="columnOption" @refresh-click="handleRefreshClick"></Action>
      <hr />
      <!-- 表格 -->
      <Table :option="option" v-if="reflag"></Table>
      <br />
      <!-- 分页栏 -->
      <Pagination :option="paginationOption" v-if="reflag"></Pagination>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { TableOption, PaginationOption, ColumnOption } from "@/typings/table";
import { User } from "@/typings/user";
import { useTableStore } from "@/store/modules/table";
import Table from "@/components/tables/index1.vue";
import Search from "@/components/tables/tableSearch.vue";
import Action from "@/components/tables/tableAction.vue";
import Pagination from "@/components/tables/pagination.vue";
import { ref, watch, nextTick } from "vue";
import { GetUserList } from '@/api/login'


const TableStore = useTableStore();
const reflag = ref(true); //重新渲染table组件标志
const data = ref([] as any);
var temp = new Array();
const cnt = ref(50); //总数据量
const column = [
  { name: "username", columnName: "用户名称" },
  { name: "loginname", columnName: "登录名称" },
  { name: "email", columnName: "邮件" },
  { name: "sex", columnName: "性别" },
  { name: "role", columnName: "角色" },
  { name: "remark", columnName: "remark" },
  { name: "status", columnName: "状态" },
  { name: "time", columnName: "创建时间" }
];
//列参数
const columnOption = ref([] as ColumnOption[]);
initColumn(column);
//表格参数
const option = ref<TableOption>({
  data: data.value,
  stripe: false,
  border: false,
  columnName: columnOption.value,
});
//分页器参数
const paginationOption = ref<PaginationOption>({
  layout: "->,prev, pager, next, jumper,sizes,total",
  total: cnt.value,
  background: true,
  small: false,
  pageSize: TableStore.pageSize,
  pagesizes: TableStore.paginationOption.pagesizes,
});

handleRefreshClick();
select(TableStore.pageSize, TableStore.pageIndex);

// function random(min: number, max: number) {
//   return Math.floor(Math.random() * (max - min + 1) + min);
// }

function handleRefreshClick() {
  GetUserList().then(function (res: any) {
    var data: User[] = res;
    console.log(data)
    initData(data);
  }).catch(function (err: any) {
    console.log(err)
  });
}


// 初始化数据
function initData(userList: User[]) {
  temp = [];
  paginationOption.value.total = userList.length;
  for (var i = 0; i < userList.length; i++) {
    temp.push(userList[i]);
  }
  TableStore.tableRender = !TableStore.tableRender
}

// 初始化列
function initColumn(arr: any[]) {
  var len = arr.length;
  var temparr: ColumnOption[] = [];
  for (var i = 0; i < len; i++) {
    temparr.push({
      name: arr[i].name,
      columnName: arr[i].columnName,
      show: true,
      type: "",
    });
  }
  columnOption.value = temparr;
}

//重新渲染数据
function select(pageSize: number, pageCnt: number) {
  var tables: any[] = [];
  var start = (pageCnt - 1) * pageSize; //显示数据的起始下标
  for (var i = start; i < start + pageSize && i < cnt.value; i++) {
    if (temp[i]) {
      tables.push(temp[i]);
    }
  }
  //将值赋值给需要重新渲染组件
  option.value.data = tables;
}

// 监听仓库数据变化
watch(
  () => TableStore.tableRender,
  () => {
    reflag.value = false;
    console.log("重新渲染")
    select(TableStore.pageSize, TableStore.pageIndex);
    //数据更新，在dom中渲染后，自动执行该函数
    nextTick(() => {
      reflag.value = true;
      TableStore.tableloading = false;
    });
  }
);

</script>

<style scoped>
.container-table {
  padding: 20px;
}
</style>
